<template>
	<scroll-view class="scroll-view" scroll-y="true">
		<view class="header">
			<view class="header-inner">
				<view >
					<!-- <image  class="header-image"  src="@/static/images/arrow-left.svg" mode="aspectFill" ></image> -->
				</view>
				<view class="title">
					消息通知
				</view>
				<view></view>
			</view>
		</view>

		<view class="type-list">
			<view :class="['type-item',type.key==active?'active':'']" v-for="(type,index) in typeList" :key="index"
				@click="typeClick(type)">
				{{type.name}}
			</view>
		</view>

		<view class="todo-list" v-if="dataList.length>0">
			<view :class="['todo-item' , checkSignList.includes(item.uid)?'todo-check-box':'']"  v-for="item  in dataList" :key="item.uid" @click="checkMessage(item)">
				<view class="left-start" @click.stop="collectMessage(item)">
					<image class="start" :src="item.collect?brightStarIcon:darkStarIcon" mode="aspectFill"></image>
				</view>
				<view class="main-context">
					<view class="left-circle"></view>
					<view class="info">
						<view class="title">
							{{item.title}}
						</view>
						<view class="detail">
							{{item.detail}}
						</view>
						<view class="createTime">
							{{ item.createTime  }}
						</view>
					</view>

				</view>
				<view class="check-sign">
					<image class="check" :src="checkSignList.includes(item.uid)?checkIcon:noCheckIcon" mode="aspectFill">
					</image>
				</view>
			</view>
		</view>
		
		<view  style="margin-top: 100rpx" v-else>
			<no-Data></no-Data>
		</view>

		<view class="footer-btns" v-show="checkSignList.length>0">
			<view class="sure-btn" @click="batchRead">
				全部已读
			</view>
			<view class="cancel-btn" @click="batchBack">
				退回
			</view>
		</view>
		<view class="go-top" v-if="scrollTop>50" @click="handleBackTop">
			<image class="go-top-image" src="@/static/images/go-top.svg" mode="aspectFill">
			</image>
		</view>
		<view class="paging-roundness">
			{{dataList.length}}/{{total}}
		</view>
	</scroll-view>
</template>

<script>
	import {
		internalMessageList,
	} from '@/api/message.js'
	import {
		formatting
	} from "@/utils/tools.js"
	
	export default {
		data() {
			return {
				brightStarIcon: "/static/images/bright-star.svg",
				darkStarIcon: "/static/images/dark-star.svg",
				checkIcon: "/static/images/check.svg",
				noCheckIcon: "/static/images/no-check.svg",
				checkSignList:[],
				typeList: [{
						key: 0,
						name: '全部'
					},
					{
						key: 1,
						name: '已读'
					},
					{
						key: 2,
						name: '未读'
					},
					{
						key: 3,
						name: '标记'
					},
				],
				dataList: [],
				total: 0, //总条数
				data: {
					pageNum: 1, //第几页
					pageSize: 10, //显示多少条
				},
				scrollTop:0,
				active: 0
			}
		},
		methods: {
			handleBackTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			onReachBottom() { //触底事件
				console.log('触底事件')
				if (this.data.pageNum * this.data.pageSize >= this.total) {
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none',
						duration: 1000
					});
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				} else {
					if (this.data.pageNum <= this.data.pageNum - 1) {
						setTimeout(() => {
							uni.hideLoading()
						}, 500)
					} else {
						uni.showLoading({
							title: '加载中'
						});
						this.data.pageNum++
						this.getInternalMessage()
					}
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				}
			},
			getInternalMessage() {
				let params={
					bizType: 'notice',
					dateType: "all"
				}
				let _this = this;
				internalMessageList(params, this.data).then(res => {
					console.log('res...', res)
					if (res.code === 0) {
						let convertData = res.data.map(item => {
							item.createTime = formatting(item.createTime);
							return item;
						});
						if (this.init) {
							_this.dataList = convertData
						} else {
							_this.dataList.push(...convertData)
						}
						_this.total = res.total
					}
				})
			},
			backPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			typeClick(type) {
				this.active = type.key
			},
			checkMessage(item) {
				console.log(item)
				if (this.checkSignList.includes(item.uid)) {
					this.checkSignList = this.checkSignList.filter(i => {
						return i != item.uid
					})
				} else {
					this.checkSignList.push(item.uid)
				}
			},
			batchRead(){
				this.checkSignList=[];
				this.$modal.msgSuccess('全部已读')
			},
			batchBack(){
				this.checkSignList=[];
				this.$modal.msgSuccess('退回成功')
			},
			collectMessage(item){
				this.$set(item,"collect",!item.collect)
				if(!!item.collect){
					this.$modal.msgSuccess('收藏成功')
				}else{
					this.$modal.msgSuccess('取消收藏')
				}
				
			}
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		mounted() {
			this.getInternalMessage()
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view {
		width: 100%;
		height: initial;
		overflow-y: initial;
		min-height: 100vh;
		padding-top: 340rpx;
		background: var(--additional-colors-white, #FFF);
	}

	.header {
		width: 100%;
		height: 240rpx;
		flex-shrink: 0;
		border-radius: 0px 0px 30px 30px;
		background: #3461FD;
		position: fixed;
		top: 0;
		z-index: 999;
		padding-top: 60px;

		.header-inner {
			display: flex;
			justify-content: space-between;
			padding: 0 25px;

			.title {
				color: #FFF;
				text-align: center;
				font-size: 18px;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: 800;
				line-height: 26px;
				letter-spacing: 0.09px;
			}

			.back-png,
			.scan-png {
				width: 24px;
				height: 24px;
				border-radius: 12px;
				text-align: center;
				line-height: 24px;

				.header-image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}


	.todo-list {
		padding: 20px 15px;
		margin-bottom: 60px;
		.todo-item {
			width: 100%;
			min-height: 81px;
			flex-shrink: 0;
			border-radius: 16px;
			background: #FFF;
			box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.08);
			margin-bottom: 15px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 20px;
            border: 1px solid transparent;
			.left-start {
				width: 20px;
				height: 20px;
				margin-right: 10px;

				/deep/ .start {
					width: 18px;
					height: 18px;

				}
			}

			.main-context {
				flex: 1;
				display: flex;

				.left-circle {
					width: 10px;
					height: 10px;
					border-radius: 14px;
					background: #EB5757;
					flex-shrink: 0;
					margin-right: 5px;
					margin-top: 5px;
				}

				.info {
					.title {
						color: #120B3C;
						font-size: 13px;
						font-family: PingFang SC;
						font-style: normal;
						font-weight: 400;
						line-height: normal;
						letter-spacing: 0.333px;
					}

					.detail {
						color: #9895AB;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-style: normal;
						font-weight: 400;
						line-height: 34rpx;
						letter-spacing: 0.333px;
					}
					
					.createTime {
						color: #3461FD;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-style: normal;
						font-weight: 400;
						line-height: 34rpx;
						letter-spacing: 0.333px;
					}
				}

			}

			.check-sign {
				width: 50px;
				flex-shrink: 0;
				text-align: right;

				/deep/ .check {
					width: 24px;
					height: 24px;
				}
			}
		}
		.todo-check-box {
			border: 1px solid #3461FD;
		}
	}

	.type-list {
		display: flex;
		justify-content: space-between;
		padding: 0 15px;
		width: calc(100vw - 20px);
		height: 50px;
		flex-shrink: 0;
		border-radius: 10px;
		background: #FFF;
		box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.10);
		align-items: center;
		margin: 10px auto 0px;
		position: fixed;
		top: 240rpx;
		left: 0;
		right: 0;
		z-index: 999;

		.type-item {
			width: 70px;
			height: 30px;
			flex-shrink: 0;
			border-radius: 15px;
			text-align: center;
			line-height: 30px;
			// background: #1278FF;
		}

		.type-item.active {
			border-radius: 15px;
			background: #1278FF;
			color: #FFF;
			font-size: 12px;
			font-family: Inter;
			font-style: normal;
			font-weight: 400;
			line-height: 30px;
		}
	}

	.footer-btns {
		position: fixed;
		bottom: 10px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 0 25px;

		.sure-btn {
			padding: 4px 16px;
			border-radius: 12px;
			background: #3461FD;
			text-align: center;
			color: #FFF;
			font-family: PingFang SC;
			font-size: 14px;
			font-style: normal;
			font-weight: 600;
			line-height: 32px;
			/* 166.667% */
			letter-spacing: 0.06px;
			width: 55%;
		}

		.cancel-btn {
			padding: 4px 16px;
			border-radius: 12px;
			background: #E3E9ED;
			text-align: center;
			color: #111;
			font-family: PingFang SC;
			font-size: 14px;
			font-style: normal;
			font-weight: 600;
			line-height: 32px;
			/* 166.667% */
			letter-spacing: 0.06px;
			width: 40%;
		}
	}
	.go-top {
		position: fixed;
		z-index: 1000;
		right: 40rpx;
		bottom: 150rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: #FFF;
		color: #9895AB;
		box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.08);
		text-align: center;
		line-height: 80rpx;
		font-size: 16px;
		.go-top-image {
			width: 100%;
			height: 100%;
		}
	}
	.paging-roundness{
		position: fixed;
		z-index: 1000;
		right: 40rpx;
		bottom: 40rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: #FFF;
		color: #9895AB;
		box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.08);
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
	}
</style>